<template>
  <div class="icon-select">
    <el-input
      v-model="name"
      style="position: relative"
      clearable
      placeholder="来搜索图标，点击选择图标"
      @clear="filterIcons"
      @input="filterIcons"
    >
      <template #prefix>
        <el-icon v-if="selectedIcon">
          <component :is="selectedIcon" />
        </el-icon>
      </template>
    </el-input>
    
    <div class="icon-list">
      <div
        v-for="(item, index) in iconList"
        :key="index"
        @click="selectedIcon = item.name; selectIcon(item)"
      >
        <el-tooltip :content="item.name" placement="bottom">
          <div
            class="icon-item"
            :class="{ 'icon-item-selected': selectedIcon === item.name }"
          >
            <el-icon>
              <component :is="item.component" />
            </el-icon>
            <span class="icon-name">{{ item.name }}</span>
          </div>
        </el-tooltip>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

interface IconItem {
  name: string
  component: any
}

const emit = defineEmits<{
  selected: [iconName: string]
}>()

const name = ref('')
const selectedIcon = ref('')
const iconList = ref<IconItem[]>([])
const allIcons = reactive<IconItem[]>([])

// 初始化图标列表
const initIcons = () => {
  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    allIcons.push({
      name: key,
      component: component,
    })
  }
  iconList.value = allIcons
}

// 过滤图标
const filterIcons = () => {
  if (name.value) {
    iconList.value = allIcons.filter(item =>
      item.name.toLowerCase().includes(name.value.toLowerCase())
    )
  } else {
    iconList.value = allIcons
  }
}

// 选择图标
const selectIcon = (item: IconItem) => {
  emit('selected', item.name)
}

// 重置选择
const reset = () => {
  selectedIcon.value = ''
  name.value = ''
  filterIcons()
}

// 暴露方法
defineExpose({
  reset,
})

// 初始化
onMounted(() => {
  initIcons()
})
</script>

<style lang="scss" scoped>
.icon-select {
  width: 100%;
  
  .icon-list {
    height: 200px;
    overflow-y: auto;
    border: 1px solid var(--el-border-color);
    border-radius: 4px;
    margin-top: 8px;
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
    
    .icon-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 8px;
      border: 1px solid transparent;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.3s;
      
      &:hover {
        border-color: var(--el-color-primary);
        background-color: var(--el-color-primary-light-9);
      }
      
      &.icon-item-selected {
        border-color: var(--el-color-primary);
        background-color: var(--el-color-primary-light-8);
        color: var(--el-color-primary);
      }
      
      .el-icon {
        font-size: 20px;
        margin-bottom: 4px;
      }
      
      .icon-name {
        font-size: 12px;
        text-align: center;
        word-break: break-all;
        line-height: 1.2;
      }
    }
  }
}

// 滚动条样式
.icon-list::-webkit-scrollbar {
  width: 6px;
}

.icon-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.icon-list::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.icon-list::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>

